<title>{{product.name}}</title>

{% load staticfiles %}

<html>
<head>
	<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" />
	<script src='{% static "js/jquery-1.11.3.js" %}'></script>
	<script src='{% static "js/base.js" %}'> </script>
	<script type="text/javascript" src="{% static 'products/js/highcharts.js' %}"></script>
	<script type="text/javascript" src="{% static 'products/js/highcharts-more.js' %}"></script>
	<script type="text/javascript" src="{% static 'products/js/exporting.js' %}"></script>
	<script>
		var feature_names = {{ impact_feature_names|safe }}
		var feature_scores = {{ impact_feature_scores|safe }}
		var feature_percentiles= {{ impact_feature_percentiles|safe }}
	</script>
	<script>
		$(function () {
			$('#highChart1').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: 'Most Impactful Features (Scores)'
				},
				xAxis: {
					categories: feature_names
				},
				credits: {
						enabled: false
					},
					series: [{
						data: feature_scores,
						name: 'Score',
						showInLegend: false            				
					}]
				});
			});    		
		$(function () {
			$('#highChart2').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: 'Most Impactful Features (Percentiles)'
				},
				xAxis: {
					categories: feature_names,
        		},
        		yAxis: {
            		min: 0,
            		max: 100
        		},
				credits: {
						enabled: false
					},
					series: [{
						data: feature_percentiles,
						name: 'Percentile',
						showInLegend: false,
					}]
				});
			});    		
		</script>
</head>
<body>

<div id='container'>
	<div id='top'>
		<div id='top-head'>
			<div id='title'>Hunter.com</div>
		</div>
		<div id='top-nav'>
			<ul id='menu'>
				<li id='menu-left'><a href='{% url "accounts:home" %}'><img src='{% static "images/home.png" %}'></a></li>
				<li id='menu-left'>Product Information</li>
				<li id='menu-search'>
					<form id='menu-search-form' method='post'>
						{% csrf_token %}
						<div id='menu-search-form-submit-div'><input type="image" id='menu-search-form-submit' src='{% static "images/search.png" %}'></input></div>
						<div id='menu-search-form-input-div'><input type='text' id='menu-search-form-input' name='search' placeholder='Search products...'></input></div>
					</form>
				</li>
				{% if login_check %}
					<li id='menu-right'>Welcome {{user_fname}}!</li>
					<li id='menu-right'><a href="{% url 'accounts:logout' %}">Logout</a></li>
				{% else %}
					<li id='menu-right'><a href="{% url 'accounts:login' %}">Login</a></li>
					<li id='menu-right'><a href="{% url 'accounts:make_new_user' %}">Register</a></li>
				{% endif %}
			</ul>
		</div>
	</div>
	<div id='main'>
		<div id='content'>                                                  
			<h1>{{product.name}}</h1>
			<br>
			<br>
			<h2>Basic Product Information</h2>
			<div>
					<table border="1" width="320px" ID="Table2" style="margin: 0px auto;">
						<tr>   
							<th>Category</th>
							<td>{{product.category}}</td>
						</tr><tr>
							<th>Brand</th>
							<td>{{product.brand}}</td>						
						</tr><tr>
							<th>Website</th>
							<td>{{product.website}}</td>
						</tr><tr>
							<th>Average User Score</th>
							<td>{{product.avg_rating}}</td>
						</tr><tr>
							<th>Pinpointing Score</th>
							<td>{{product_score}}</td>
						</tr><tr>
							<th>Percentile</th>
							<td>{{product_percentile}}</td>							
						</tr><tr>
							<th>User Reviews</th>
							<td><a href="{% url 'products:reviews' product.id %}">Reviews</a></td>
					</table>
			</div>
			<br>
			<h2>Feature Information</h2>

			<div id="highChart1" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
			<div id="highChart2" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

			<br>
			<p>{{product.description}}</p>

			<br>
			<div>
				<script type="text/javascript" src="{% static 'products/js/sorttable.js' %}"></script>
				<table border="1" width="100%" class="sortable" ID="Table2" style="margin: 0px;">
					<tr>   
						<th><p>Feature<p></th>
						<th><p>Score<p></th>
						<th><p>Percentile<p></th>
					{% for feature in feature_value_vector %}		        
					</tr>
						<td>{{feature.feature}}</td>
						<td>{{feature.score}}</td>
						<td>{{feature.percentile}}</td>
					</tr>
					{% endfor %}
				</table>
			</div>

			<h5>Last updated: {{product.update_date}}</h5>
		</div>
		<script>windowResize()</script>
	</div>
	<div id='foot'>
		created by 郝蕊 and Leonard Wainstein | designed by Gabriel Mickel<br>
		copyrighted: never! :)
	</div>
</div>
</body>
</html>